<template>
  <div>
    <br>
    <div
      id="video"
      style="width:98%;height:300px;background-color:#000000;margin:auto"
    />
    <br>
    <div style="text-align:center; margin:auto;">
      <input
        id="path1"
        type="text"
        value="http://192.168.14.128:1935/live/hello.m3u8"
        placeholder="请输入视频地址，支持mp4/flv格式"
      >
      <button @click="playVideo1()">播放</button>
      <br>
      <input
        id="path2"
        type="text"
        value="rtmp://192.168.14.128:1935/stream"
        placeholder="请输入视频地址，支持rtmp直播"
      >
      <button @click="playVideo2()">直播</button>
    </div>
    <div
      id="pp"
      class="button"
      onclick="ppVideo()"
    >播放</div>

  </div>
</template>

<script>

var video = null
var playing = null
export default {
  data() {
    return {
      bstart: false,
      pusher: null
    }
  },
  mounted() {
    let msg = ''
    if (window.plus) {
      this.plusready()
      msg = plus.device.uuid
    } else {
      document.addEventListener('plusready', this.plusready, false)
      msg = false
    }
    return msg
  },
  methods: {
    plusReady() {
      alert(1)
      // 创建视频播放控件
      video = new plus.video.VideoPlayer('video', {
        src: 'http://192.168.14.128:1935/live/hello.m3u8'
      })
      video.addEventListener('play', function() {
        this.updatePlaying(true)
      }, false)
      video.addEventListener('pause', function() {
        this.updatePlaying(false)
      }, false)
    },
    // 播放
    playVideo1() {
      var path = document.getElementById('path1').value
      if (path && path.length > 0) {
        video.setOptions({ src: path })
        video.play()
      }
    },
    playVideo2() {
      var path = document.getElementById('path2').value
      if (path && path.length > 0) {
        video.setOptions({ src: path })
        video.play()
      }
    },
    // 更新为播放状态
    updatePlaying(play) {
      playing = play
      document.getElementById('pp').innerText = playing ? '暂停' : '播放'
    },
    // 播放/暂停
    ppVideo() {
      playing ? video.pause() : video.play()
    }
  }
}
</script>
<style scoped>
input {
  width: 70%;
  font-size: 16px;
  padding: 0.2em 0.2em;
  border: 1px solid #00b100;
  -webkit-user-select: text;
}
button,
.button {
  width: 20%;
  margin: 6px 0 6px 6px;
  font-size: 16px;
  color: #fff;
  background-color: #00cc00;
  border: 1px solid #00b100;
  padding: 0.2em 0em;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
</style>
